<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :label-position="labelPosition">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
                <el-col v-bind="grid">
                  <el-form-item label="公司名称：">
                    <el-input v-model="userFrom.name" placeholder="请输入公司名称" clearable />
                  </el-form-item>
                  <el-form-item label="联系人：">
                    <el-input v-model="userFrom.username" placeholder="请输入联系人" clearable />
                  </el-form-item>
                  <el-form-item label="手机号：">
                    <el-input v-model="userFrom.phone" placeholder="请输入手机号" clearable />
                  </el-form-item>
                  <el-button
                    type="primary"
                    icon="ios-search"
                    label="default"
                    class="mr15"
                    size="small"
                    @click="userSearchs"
                  >搜索</el-button>
                  <el-button size="small" type="reset" @click="reset('userFrom')">重置</el-button>
                  <el-button
                    type="primary"
                    icon="ios-search"
                    label="default"
                    class="mr15"
                    size="small"
                    @click="exportExcel"
                    >导出人脉信息</el-button>
                </el-col>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="taber">
        <el-table
          :data="tableData.list"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          default-expand-all
          ref="dataTreeList"
          :tree-props="{children: 'none', hasChildren: 'none'}"
          id="educe-table"
        >
          <el-table-column width="50"></el-table-column>
          <el-table-column prop="id" label="ID" width="100"></el-table-column>
          <el-table-column prop="logo" label="logo" width="150">
            <template slot-scope="scope">
              <img :src="scope.row.logo" width="50%" class="logo" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="公司名称" width="180"></el-table-column>
          <el-table-column prop="address" label="公司地址"></el-table-column>
          <el-table-column prop="username" label="联系人" width="150"></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="shop_name" label="店铺类型"></el-table-column>
          <el-table-column prop="type_name" label="所属行业"></el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          :page-sizes="[10 , 20, 40, 60, 80]"
          :page-size="userFrom.limit"
          :current-page="userFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.count"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
  </div>
</template>
  <script>
    import {
        cardEnterpriseList
    } from "@/api/networking"
    import FileSaver from "file-saver";
    import XLSX from "xlsx";
export default {
  data() {
    return {
      // form浮动样式
      labelPosition: "right",
      // 响应式
      grid: {
        xl: 24,
        lg: 24,
        md: 24,
        sm: 24,
        xs: 24
      },
      //  公司信息列表
      tableData: {
        data: [],
        count: 0
      },
      // 搜索内容
      userFrom: {
        // 页数
        page: 1,
        // 显示多少条
        limit: 10,
        // 手机号
        phone: "",
        // 公司名称
        name: "",
        // 联系人
        username: ""
      },
    };
  },
  created() {
    this.getenterprise();
  },
  methods: {
    // 导出文件
    exportExcel() {
      // 1.生成Excel工作簿对象
      var wb = XLSX.utils.table_to_book(document.querySelector("#educe-table"));
      // 2.手机号，身份证号等会默认使用科学计数法表示，则需要这样设置
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#educe-table"),
        { raw: true }
      );
      // 获取二进制字符串作为输出
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        book: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          // Blob: 对象表示一个不可变 原始数据的类文件对象,不一定是JS原生格式的数据。
          // File: 基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。
          new Blob([wbout], { type: "appliction/octet-stream" }),
          // 设置导出的文件名称可随意
          "人脉信息.xlsx"
        );
      } catch (e) {
        if (typeof console != "undefined") console.log(e, wbout);
      }
      // 返回一个新创建的Blob对象，其内容由参数中给定的数组串联组成。
      return wbout;
    },
    // 搜索
    userSearchs() {
      this.getenterprise();
    },
    // 重置
    reset() {
      this.userFrom = {
        page: 1,
        limit: 10,
        phone: "",
        nickname: ""
      };
      this.getenterprise();
    },
    // 更好展示页面
    pageChange(page) {
      this.userFrom.page = page;
      this.getenterprise();
    },
    // 更换展示数量
    handleSizeChange(val) {
      this.userFrom.limit = val;
      this.getenterprise();
    },
    // 公司信息列表
    getenterprise() {
      cardEnterpriseList(this.userFrom).then(res => {
        console.log(res, "res");
        this.tableData = res.data;
      });
    },
  }
};
</script>
  <style lang="stylus" scoped>
  /deep/ .el-card__body {
    padding: 0 0 20px 0;
  }

  .block {
    padding-right: 20px;
  }

  .tianjzw {
    padding: 0px 20px;

    .oinpiut {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0px;

      span {
        width: 100px;
      }
    }

    .annui {
      padding: 10px 0px;
      text-align: center;

      /deep/.el-button--primary {
        margin-right: 0px !important;
      }
    }
  }

  .xss {
    margin: auto;
    text-align: center;

    /deep/.ivu-input-wrapper {
      padding-bottom: 20px;
    }

    .oenter {
      text-align: center;

      /deep/.el-button--primary {
        margin-right: 0px !important;
      }
    }
  }

  .taber {
    // padding:20px 30px;
    // margin: 0px 10px;
    background-color: #fff;

    /deep/.el-table th.el-table__cell {
      background-color: rgb(245, 247, 250);
    }
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .expand-row {
    margin-bottom: 16px;
  }

  /deep/.button, html [type='button'], [type='reset'], [type='submit'] {
    margin-right: 20px;
  }

  .odiv {
    background-color: #fff;
    padding: 20px 20px;
    margin: 20px 10px;
    border-radius: 5px;

    span {
      font-style: 12px;
      margin-left: 20px;
    }

    .opsn {
      color: #409eff;
      font-weight: 500;
    }
  }

  .sousuo {
    margin: 20px 10px;
    background-color: #fff;
    padding: 5px 32px;

    .shond {
      height: 60px;
      border-bottom: 1px solid #E1E1E1;
      margin-bottom: 20px;
      line-height: 60px;
    }

    .soudiv {
      margin: 10px 0px;
      border: 1px solid #E1E1E1;
      padding: 20px 32px;
      display: flex;
      align-items: center;

      div {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          display: block;
          width: 45px;
          text-align: right;
          vertical-align: middle;
          font-size: 14px;
          line-height: 40px;
          padding: 0 12px 0 0;
        }
      }

      div:nth-child(1) {
        span {
          width: 100px;
        }
      }

      .el-button {
        margin-left: 20px;
      }
    }
  }

  .logo {
    width: 50px;
    height: 50px;
  }
</style>
  